<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
    <path
      d="M11.2934 0H8.53119V10.8985C8.53119 12.1971 7.46881 13.2638 6.14672 13.2638C4.82462 13.2638 3.76223 12.1971 3.76223 10.8985C3.76223 9.6232 4.80101 8.57969 6.0759 8.53333V5.79711C3.26644 5.84347 1 8.09276 1 10.8985C1 13.7276 3.31366 16 6.17034 16C9.02697 16 11.3406 13.7044 11.3406 10.8985V5.31013C12.3794 6.05218 13.6543 6.49276 15 6.51596V3.77971C12.9224 3.71015 11.2934 2.04058 11.2934 0Z"
      fill="currentColor" />
  </svg>
</template>

<script setup lang="ts">
  interface Props {
    size?: number | string;
    color?: string;
    fill?: string;
    strokeWidth?: number | string;
    iconClass?: string;
  }

  const props = withDefaults(defineProps<Props>(), {
    size: 24,
    color: '#7A7A7A',
    fill: 'none',
    strokeWidth: 1,
    iconClass: '',
  });
</script>

<style scoped lang="scss">
  svg {
    display: inline-block;
    vertical-align: middle;
    fill: currentColor;
    overflow: hidden;
    outline: none;
    color: v-bind('props.color');
    cursor: pointer;
    &:hover {
      color: #222222;
    }
  }
</style>
